import React from 'react'
import './a01setState.css'
export default class TestSetState extends React.Component {
  state = {
    count: 0,
    nextCount: 0
  }
  handClick1 = () => {
    // 如果同时写两个setState,后面一个并不会依赖于前一个的计算结果
    // 比如这里想让nextCount的结果依赖于上次运行的结果，但是实际上并不会
    // 因为这第二个setState的运行并不会依赖于第一个
    // 为了解决这个问题，可以采用异步的方式来实现，但是这样做还是太麻烦
    // 所以推荐使用第二种方式，就是handClick2的操作方式
    this.setState({
      count: this.state.count + 1
    })
    // this.setState({
    //   nextCount: this.state.count + 1
    // })
    setTimeout(() => {
      this.handClick3()
    }, 10)
  }
  handClick3 = () => {
    this.setState({
      nextCount: this.state.count + 1
    })
  }

  // 这里采用了箭头函数的写法，可以完美的解决上面遇到的问题
  // 使用了这种写法，就可以在每次使用的时候都获取到最新的state和props
  // 官方推荐的这种写法虽然避免了之前的尴尬，但是他也暴露了这个框架本身的一些缺陷
  // 就是他会不自觉的遗留很多坑，然后又在文档中给开发者介绍怎么避开这些坑，开发者还会去赞美他
  // 这就是尤雨溪说的，react官方pua开发者
  handClick2 = () => {
    // 在setState这个方法中还有另外一种用法，就是
    this.setState((state, props) => {
      return {
        count: state.count + 1
      }
    })
    this.setState((state, props) => {
      return {
        nextCount: state.count + 1
      }
    })
  }
  render () {
    return (
      <div>
        <div className='box' onClick={this.handClick1}>
          测试数据1:{this.state.count}
        </div>
        <div className='box' onClick={this.handClick2}>
          测试数据2:{this.state.nextCount}
        </div>
      </div>
    )
  }
}
